<template>
  <BgVue>
    <template #imgFixed>
      <img src="@/assets/imgV2/exchange-bg-bottom.jpg" />
    </template>
    <template #img>
      <img src="@/assets/imgV2/exchange-bg.png" />
    </template>

    <div class="exchange">
      <div class="boxS1">
        <div class="tit">
          {{ t('home.SD') }}
        </div>
        <div class="list">
          <div class="item">
            <div class="name">{{ t('home.DBZL') }}</div>
            <div class="val">300000000 PT</div>
          </div>
          <div class="item">
            <div class="name">{{ t('home.XS') }}</div>
            <div class="val">{{ price }} USDT</div>
          </div>
          <!-- <div class="item">
            <div class="name">已经募集</div>
            <div class="val">{{ hadAmount }} USDT</div>
          </div> -->
          <div class="item">
            <div class="name">{{ t('home.ZX') }}</div>
            <div class="val">{{ minAmount }} USDT</div>
          </div>
          <div class="item">
            <div class="name">{{ t('home.ZD') }}</div>
            <div class="val">{{ maxAmount }} USDT</div>
          </div>
          <div class="item">
            <div class="name">{{ t('home.SQED') }}</div>
            <div class="val">{{ allowance }} USDT</div>
          </div>
        </div>
      </div>
      <div class="boxS2">
        <div class="tit">{{ t('home.SDJE') }}</div>
        <div class="aff"> {{ t('home.YE') }}: {{ balance }} USDT </div>
        <div class="list">
          <div class="row">
            <input
              autocomplete="off"
              v-model="amount"
              maxlength="10"
              @input="onInput"
            />
          </div>
          <div class="row">
            <div class="result"> {{ gainAmount }} PT </div>
          </div>
        </div>

        <div class="btn">
          <button type="button" v-if="_init" @click="buy"
            ><span>{{
              pending
                ? t('home.CLZ')
                : this.allowance * 1 >= this.amount * 1
                ? t('home.DH')
                : t('home.SQ')
            }}</span>
          </button>
        </div>
      </div>
    </div>
  </BgVue>
</template>
<script>
import {
  balanceOf,
  getIdoPrice,
  getAddress,
  idoHadAmount,
  idoBegin,
  idoMin,
  idoMax,
  idoBuy,
  getAllowance,
  idoApprove,
} from '../dapp'
import { USDT_CONTRACT_ADDRESS, IDO_CONTRACT_ADDRESS } from '../abi'
import BgVue from '@/components/BgVue.vue'

export default {
  data() {
    return {
      balance: '-',
      price: '-',
      _init: false,
      hadAmount: '-',
      gainAmount: 0,
      isOpen: false,
      amount: 0,
      allowance: 0,
      minAmount: '-',
      maxAmount: '-',
      pending: false,
    }
  },
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const address = await getAddress()
      this.balance = await balanceOf(USDT_CONTRACT_ADDRESS, address, 18)
      this.price = await getIdoPrice(IDO_CONTRACT_ADDRESS)
      this.hadAmount = await idoHadAmount(IDO_CONTRACT_ADDRESS)
      this.isOpen = await idoBegin(IDO_CONTRACT_ADDRESS)
      this.minAmount = await idoMin(IDO_CONTRACT_ADDRESS)
      this.amount = this.minAmount
      this.onInput()
      this.maxAmount = await idoMax(IDO_CONTRACT_ADDRESS)
      this.allowance = await getAllowance(
        IDO_CONTRACT_ADDRESS,
        USDT_CONTRACT_ADDRESS,
      )
      this._init = true
    },
    onInput() {
      if (this.price && this.amount) {
        this.gainAmount = (this.amount / this.price).toFixed(2)
      }
    },
    async buy() {
      if (this.pending) return
      this.pending = true
      var tx
      let { t } = this
      try {
        if (this.allowance * 1 >= this.amount * 1) {
          console.log('buy')
          tx = await idoBuy(
            IDO_CONTRACT_ADDRESS,
            USDT_CONTRACT_ADDRESS,
            this.amount,
          )
          if (tx) {
            Toast(t('home.DHCG'))
            this.init()
          }
        } else {
          console.log('approve')
          tx = await idoApprove(
            IDO_CONTRACT_ADDRESS,
            USDT_CONTRACT_ADDRESS,
            this.amount,
          )
          if (tx) {
            Toast(t('home.SQCG'))
            this.init()
          }
        }
        this.pending = false
      } catch (e) {
        this.pending = false
        console.log('Error', e)
      }
    },
  },
  components: { BgVue },
}
</script>
<style lang="less" scoped>
.exchange {
  .boxS1 {
    .list {
      // display: flex;
    }

    .tit {
      height: 55px;
      padding: 10px 42px;
      color: #ffc53d;
      font-size: 26px;

      // background-image: linear-gradient(to top, #faaf20, #fedf42);
      // background-clip: text;
      // color: transparent;

      text-shadow: 1px 2px 0px rgba(10, 2, 4, 0.2);
      font-weight: bold;
    }

    .item {
      display: flex;
      justify-content: space-between;
      height: 61px;
      padding: 20px 34px;
    }

    .item + .item {
      // margin-bottom: -10px;
      margin-top: -7px;
    }

    .name {
      color: #117fd4;
      font-size: 16px;
      font-weight: bold;
      padding-left: 60px;
    }
    .val {
      color: #065aa2;
      font-size: 13px;
      line-height: 21px;
      font-weight: bold;
    }
  }
  .boxS2 {
    padding: 35px 38px 0;

    .tit {
      height: 35px;
      color: #ffc53d;
      font-size: 19px;

      text-shadow: 1px 2px 0px rgba(10, 2, 4, 0.2);
      font-weight: bold;
      padding-bottom: 10px;
      padding-left: 10px;
    }
    .aff {
      height: 20px;
      color: #98d8f8;
      font-size: 15px;
      text-align: right;
    }
    .row {
      padding: 8px 14px;
      color: #ffffff;
      font-size: 18px;
      text-align: right;
    }
    .row + .row {
      margin-top: 22px;
      // height:
    }
    .result {
      height: 24px;
    }
    input {
      height: 26px;
      color: #ffffff;
      font-size: 18px;
      text-align: right;
      background: transparent;
      border: none;
    }

    .btn {
      padding: 8px 0;
    }
    button {
      display: block;
      width: (524px/2);
      // margin: 0
      height: (88px/2);
      // padding: 6px 0;
      margin: 0 auto;
      color: #ffffff;
      font-weight: bold;
      font-size: 20px;
      line-height: 42px;
      text-shadow: #d8540d 1px 0 0, #d8540d 0 1px 0, #d8540d -1px 0 0,
        #d8540d 0 -1px 0;
      background: url('@/assets/imgV2/btn/btn-big.png') no-repeat;
      background-size: 100% 100%;
      border: none;
    }
  }
}
</style>
